<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>三坐标报告</title>

		<link rel="stylesheet" href="../assets/css/QMS/PageCss/DocumentsPage.css">
		<link rel="stylesheet" href="../assets/css/QMS/luckysheet/pluginsCss.css">
		<link rel="stylesheet" href="../assets/css/QMS/luckysheet/luckysheet.css">
		<link rel="stylesheet" href="../assets/css/QMS/luckysheet/plugins.css">
		<link rel="stylesheet" href="../assets/css/QMS/luckysheet/iconfont.css">
		<link rel="stylesheet" href="../assets/css/QMS/vant.min.css">
		<link rel="stylesheet" href="../assets/css/QMS/element.css">
		<script src="../assets/script/my-xmlhttprequest.js"></script>
		<script src="../assets/script/jquery.js"></script>
		<script src="../assets/script/vue.min.js"></script>
		<script src="../assets/script/vant.min.js"></script>
		<script src="../assets/script/element.js"></script>
		<!-- <script src="../../../../static/assets/script/plugin.js"></script> -->
		<!-- <script src="../../../../static/assets/script/umd.js"></script> -->
		<script src="./assets/scrpit/plugin.js"></script>
		<script src="./assets/scrpit/umd.js"></script>
		<script src="../assets/js/base.js"></script>
		<script src="./assets/js/morkData.js"></script>
	</head>
	<style>
		body,
		html,
		#app {
			overflow: hidden !important;
		}
	</style>
	<body>
		<div id="app" v-cloak style="position: relative;">
			<div style="width: 100%;height: calc(100% - 20px);background-color: transparent;position: absolute;top: 0;left: 0;z-index: 99999;"></div>
			<div id="luckysheet_SZB" style="width: 100%;"></div>

		</div>

	</body>

	<script src="./assets/script/uni.webview.1.5.4.js"></script>
	<script>
		// var pvm = parent.vm;
		var vm = new Vue({
			el: '#app',
			data: {
				ChoiceCellData: {}, // 父页面选中单元格信息
				reportInfo: [],
			},
			created() {},
			mounted() {
				let that = this;

				// '*' 表示发送给所有源，也可以指定具体的父页面源
				window.parent.postMessage('getHeight', '*'); // 获取高度
				window.parent.postMessage('getReportRadio', '*'); // 选中的报告的索引
				// 监听来自父页面的回复消息
				window.addEventListener('message', function(event) {
					// 验证消息的来源（这里简单起见不验证，但生产环境中应该验证）
					// if (event.origin !== "http://your-expected-parent-origin.com") {
					//     return;
					// }
					// 处理来自父页面的消息（即父页面的数据）
					console.log(JSON.stringify(event.data));
					if (event.data.name == "getHeight") {
						const heightData = event.data.value;

						setTimeout(() => {
							let luckysheet_SZB_Height = heightData;
							$('#luckysheet_SZB').css({
								'height': luckysheet_SZB_Height + 'px'
							});

						}, 300);
					}
					if (event.data.name == "getReportRadio") {
						// 获取数据

						// setTimeout(() => {
						that.getPageInfoData(event.data.value, event.data.typeName);
						// }, 300);
					}
					if (event.data.name === 'requestChildData') {
						let myData = {
							name: 'childData',
							value: {
								reportInfo: that.reportInfo
							}
						};
						// 把数据发送回父页面
						window.parent.postMessage("childData", '*');
					}

					// 处理完消息后可以移除监听器（如果需要的话）
					// window.removeEventListener('message', arguments.callee);
				});

			},
			beforeDestroy() {
				// 处理完消息后可以移除监听器（如果需要的话）
				window.removeEventListener('message');
			},
			methods: {
				getPageInfoData(index, typeName) {
					// 1、获取表格结构
					let that = this;
					APP.jqueryAjax('getReportDataByID_1', {
						TourInspectionDeDeID: '',
					}, function(ret) {
						if (ret.status == 200 && ret.data.ds.length) {

							// console.log(ret.data.ds[0]["testReportValue"]);

							let ReportTitle = JSON.parse(ret.data.ds[0]["testReportTitle"])

							let allCellData = [], // 表头
								HeadKey = [], // 表头key值
								colNums = 0, // 列数
								rowData = [], // 行数据
								rowNums = 0; // 行数

							Object.keys(ReportTitle).forEach((key, index) => {
								let obj = {
									"r": 0,
									"c": index,
									"v": {
										"ct": { //单元格值格式
											"fa": "General", //格式名称为自动格式
											"t": "n" //格式类型为数字类型
										},
										"v": ReportTitle[key],
										"m": key,
										// "bg": "#eeeff1", //背景为 "#eeeff1"
										"ff": 1, // 字体为 "Arial"
										"fc": "#333", //字体颜色为 "#333"
										"bl": 0, //字体加粗
										"fs": 8, //字体大小为 9px
										"ht": 0, //水平居中
										"vt": 0, //垂直居中
										"tb": 2, //文本自动换行
									}
								}

								// 1、处理表头结构
								allCellData.push(obj);
								// 2、获取key值
								HeadKey.push(key)
							})
							// 3、获取列数
							colNums = HeadKey.length;

							// 4、获取行数据
							rowData = JSON.parse(ret.data.ds[0]["testReportValue"])[index].filter(item => {
								return item.ordinal == typeName;
							});

							that.reportInfo = rowData;
							rowNums = rowData.length;
							rowData.forEach((item, index) => {
								HeadKey.forEach((row, i) => {
									let v = {
										"r": 1 + index,
										"c": 0 + i,
										"v": {
											"v": item[row],
											"m": row,
											// "bg": "#eeeff1", //背景为 "#eeeff1"
											"ff": 1, // 字体为 "Arial"
											"fc": "#333", //字体颜色为 "#333"
											"bl": 0, //字体加粗
											"fs": 7, //字体大小为 9px
											"ht": 0, //水平居中
											"vt": 0, //垂直居中
											"tb": 2, //文本自动换行
										}
									}
									allCellData.push(v)
								})

							});

							that.ExcleInit(rowNums, colNums, allCellData); // 渲染表格
						}
					}, function(err) {
						console.log(ret);
					})

				},
				ExcleInit(rowNums, colNums, cellData, dataVerfications) { // 渲染表格
					var options = {
						container: 'luckysheet_SZB', // 容器ID
						title: '检验', // 表格名称
						lang: 'zh', // 语言
						showtoolbar: false,
						showinfobar: false,
						showsheetbar: false,
						sheetFormulaBar: false,
						showstatisticBar: true, // 缩放按钮
						showcolumnbar: false,
						enableAddRow: false,
						enableAddBackTop: false,
						keyboardenable: false, // 禁止键盘操作
						editable: false, // 只读模式
						cellReadOnly: true,
						rowHeaderWidth: 0,
						columnHeaderHeight: 0,
						rowTitleCellRenderAfter: false,
						columnTitleCellRenderAfter: false,
						data: [{
							"name": "检验报告", // 工作表名称
							"color": "", // 工作表颜色
							"index": 0, // 工作表索引
							"status": 1, // 激活状态
							"order": 0, // 工作表下标
							"hide": 0, // 是否隐藏
							"row": rowNums, // 行数
							"column": colNums, // 列数
							"defaultRowHeight": 19, // 自定义行高
							"defaultColWidth": 80, // 自定义列宽
							"celldata": cellData,
							"config": {
								"merge": {}, // 合并单元格
								"borderType": "border-all",
								"rowlen": {}, // 表格行高
								"columnlen": {}, // 表格列宽
								"rowhidden": {}, // 隐藏行
								"colhidden": {}, // 隐藏列
								"borderInfo": {
									"range": "0:100",
									"value": "1px solid #000000"
								}, // 边框
								"authority": {}, // 工作表保护

							},
							"scrollLeft": 0, // 左右滚动条位置
							"scrollTop": 0, // 上下滚动条位置
							"luckysheet_select_save": [], // 选中的区域
							"calcChain": [], // 公式链
							"isPivotTable": false, // 是否数据透视表
							"pivotTable": {}, // 数据透视表设置
							"filter_select": {}, // 筛选范围
							"filter": null, // 筛选配置
							"luckysheet_alternateformat_save": [], // 交替颜色
							"luckysheet_alternateformat_save_modelCustom": [], // 自定义交替颜色	
							"luckysheet_conditionformat_save": {}, // 条件格式
							"zoomRatio": 1.6, // 缩放比例
							"image": [], // 图片
							"showGridLines": 1, // 是否显示网格线
							"frozen": {
								type: 'rangeBoth',
								range: {
									row_focus: 0,
									column_focus: 0
								}
							}
						}],
						hook: {
							// 禁止单元格聚焦
							cellFocus: function(row, column, cell, event) {
								return false; // 返回false阻止聚焦
							},
							// 禁止区域选择
							rangeSelect: function() {
								return false;
							},
							// 禁止单元格编辑
							cellEditBefore: function() {
								throw '只读，禁止编辑';
							},
							// 隐藏行标题
							rowTitleCellRenderBefore: function(rowNum, position, ctx) {
								return false;
							},
							// 隐藏列标题
							columnTitleCellRenderBefore: function() {
								return false;
							},
						}
					}

					setTimeout(() => {
						luckysheet.create(options)
					}, 300)


				},

				/**
				 * @description 深度克隆
				 * @param {object} obj 需要深度克隆的对象
				 * @param cache 缓存
				 * @returns {*} 克隆后的对象或者原值（不是对象）
				 */
				deepClone(obj, cache = new WeakMap()) {
					let that = this;
					if (obj === null || typeof obj !== 'object') return obj;
					if (cache.has(obj)) return cache.get(obj);
					let clone;
					if (obj instanceof Date) {
						clone = new Date(obj.getTime());
					} else if (obj instanceof RegExp) {
						clone = new RegExp(obj);
					} else if (obj instanceof Map) {
						clone = new Map(Array.from(obj, ([key, value]) => [key, that.deepClone(value, cache)]));
					} else if (obj instanceof Set) {
						clone = new Set(Array.from(obj, value => that.deepClone(value, cache)));
					} else if (Array.isArray(obj)) {
						clone = obj.map(value => that.deepClone(value, cache));
					} else if (Object.prototype.toString.call(obj) === '[object Object]') {
						clone = Object.create(Object.getPrototypeOf(obj));
						cache.set(obj, clone);
						for (const [key, value] of Object.entries(obj)) {
							clone[key] = that.deepClone(value, cache);
						}
					} else {
						clone = Object.assign({}, obj);
					}
					cache.set(obj, clone);
					return clone;
				}
			},
		})
	</script>
</html>